.blink {
    -webkit-animation: 3s blink ease infinite;
    -moz-animation: 3s blink ease infinite;
    -ms-animation: 3s blink ease infinite;
    -o-animation: 3s blink ease infinite;
    animation: 3s blink ease infinite;
}

@keyframes "blink" {

    from,
    to {
        opacity: 0.33;
    }

    50% {
        opacity: 1;
    }
}

@-moz-keyframes blink {

    from,
    to {
        opacity: 0.33;
    }

    50% {
        opacity: 1;
    }
}

@-webkit-keyframes "blink" {

    from,
    to {
        opacity: 0.33;
    }

    50% {
        opacity: 1;
    }
}

@-ms-keyframes "blink" {

    from,
    to {
        opacity: 0.33;
    }

    50% {
        opacity: 1;
    }
}

@-o-keyframes "blink" {

    from,
    to {
        opacity: 0.33;
    }

    50% {
        opacity: 1;
    }
}


input {
     z-index: 2000;
}

 // Enhanced error box styling
 .vd-error {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
   margin: 16px 0;
   background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
   border: 1px solid #fca5a5;
   border-radius: 8px;
   color: #dc2626;
   font-size: 14px;
   font-weight: 500;
   box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
   animation: error-gentle-pulse 0.8s ease-out;
   
   .error-icon {
     font-size: 18px;
     color: #ef4444;
     flex-shrink: 0;
     animation: icon-gentle-bounce 0.6s ease-out;
   }
   
   .error-text {
     flex: 1;
     line-height: 1.4;
   }
   
   &:hover {
     background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    transition: all 0.3s ease;
   }
 }

 // Smooth fade in/out animation for error
 .error-fade-enter-active,
 .error-fade-leave-active {
   transition: all 0.3s ease;
 }
 
 .error-fade-enter-from {
   opacity: 0;
   transform: translateY(-10px);
 }
 
 .error-fade-leave-to {
   opacity: 0;
   transform: translateY(-10px);
 }

 // Shake animation for error appearance
 @keyframes error-gentle-pulse {
   0% { 
     opacity: 0;
     transform: scale(1);
   }
   50% {
     opacity: 0.8;
     transform: scale(1);
   }
   100% { 
     opacity: 1;
     transform: scale(1);
   }
 }

 // Gentle bounce for the icon
 @keyframes icon-gentle-bounce {
   0%, 100% { transform: translateY(0); }
   30% { transform: translateY(-2px); }
   60% { transform: translateY(-1px); }
 }
 
